<template>
  <div class="list">
    <div style="display: flex; margin-bottom: 30px">
      <el-breadcrumb separator="/" class="breadcrumb">
        <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
        <el-breadcrumb-item :to="{ path: '/member/list' }">会员服务</el-breadcrumb-item>
        <el-breadcrumb-item>产品权益对比</el-breadcrumb-item>
      </el-breadcrumb>
      
    </div>
    <div class="content">
      <el-table
        :data="mergedArray"
        :span-method="objectSpanMethod"
        :header-cell-style="headerStyle"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          align="center"
          prop="productName"
          label="产品"
          min-width="180">
        </el-table-column>
        <el-table-column
          align="center"
          label="服务项目">
          <el-table-column
            align="center"
            min-width="180"
          >
            <template #default="scope">
              {{scope.row.categoryOne}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            min-width="180">
            <template #default="scope">
              {{scope.row.categoryTwo}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          min-width="200"
          v-for="(item,index) in tableData"
          :key="item">
          <template #header>
            <div>{{ item.goodsName }}</div>
            <div><span class="price">{{ item.price }}</span>元/年</div>
            <el-button round @click="toMemberRecharge(item.goodsId, index)">立即购买</el-button>
          </template>
          <template #default="scope">
            <span v-if="scope.row['productValue'+index] == '0'" class="no">×</span>
            <span v-else-if="scope.row['productValue'+index] == '1'" class="yes">✓<span v-if="scope.row['produceValueExt'+index]" class="text">({{ scope.row['produceValueExt'+index] }})</span></span>
            <div v-else-if="scope.row['productValue'+index].split('|').length > 1">
              <div v-for="(it,i) in scope.row['productValue'+index].split('|')" :key="it">{{ it }}</div>
            </div>
          <span v-else>{{ scope.row['productValue'+index] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
  </div>
</template>

<script>
import { getGoodsList } from '@/api/bid/bidding'

export default {
  name: "comparison",
  data() {
    return {
      mergedArray: [],
      tableData: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取权益列表数据
    initData() {
      getGoodsList().then(res => {
        this.tableData = res.rows;
        console.log(res)
        const arrList = [];
        res.rows.forEach(item => {
          arrList.push(item.goodsAttrs)
        });
        arrList.forEach((item, index) => {
          item.forEach((it, i) => {
            it['productValue' + index] = it['productValue']
            it['produceValueExt' + index] = it['produceValueExt']
            })
        });
        // 合并数组
        this.mergedArray = this.mergeArrays(...arrList);
      })
    },

    // 合并数组的函数
    mergeArrays(...arrays) {
      const mergedArray = [];
      // 遍历每个数组
      for (let i = 0; i < arrays[0].length; i++) {
        const mergedObj = { id: arrays[0][i].id };
        // 遍历每个数组的对象
        for (let j = 0; j < arrays.length; j++) {
          const obj = arrays[j][i];
          Object.assign(mergedObj, obj);
        }
        mergedArray.push(mergedObj);
      }
      return mergedArray;
    },

    // 合并表头
    headerStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 1) {
            return {display: 'none'}
        }
    },

    // 合并表格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 判断当前列是第一列，即"productName"列
        if (rowIndex === 0 || row.productName !== this.mergedArray[rowIndex - 1].productName) {
          // 当前行是第一行，或者当前行的"productName"与上一行不同，需要合并单元格
          return {
            rowspan: this.getRowspan(row.productName, rowIndex),
            colspan: 1
          };
        } else {
          // 当前行的"productName"与上一行相同，不需要合并单元格
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (columnIndex === 1) {
        // 判断当前列是第二列，即"categoryOne"列
        if (rowIndex === 0 || row.categoryOne !== this.mergedArray[rowIndex - 1].categoryOne) {
          // 当前行是第一行，或者当前行的"categoryOne"与上一行不同，需要合并单元格
          return {
            rowspan: this.getRowspan2(row.categoryOne, rowIndex),
            colspan: 1
          };
        } else {
          // 当前行的"categoryOne"与上一行相同，不需要合并单元格
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },

    // 第一列，即"productName"列
    getRowspan(productName, rowIndex) {
      // 计算合并的行数
      let count = 1;
      for (let i = rowIndex + 1; i < this.mergedArray.length; i++) {
        if (this.mergedArray[i].productName === productName) {
          count++;
        } else {
          break;
        }
      }
      return count;
    },

    // 第二列，即"categoryOne"列
    getRowspan2(categoryOne, rowIndex) {
      // 计算合并的行数
      let count = 1;
      for (let i = rowIndex + 1; i < this.mergedArray.length; i++) {
        if (this.mergedArray[i].categoryOne === categoryOne) {
          count++;
        } else {
          break;
        }
      }
      return count;
    },

    // 立即购买
    toMemberRecharge(goodsId,index){
      this.$router.push({path:'/member/recharge',query: {goodsId,index}})
    }
  },
}
</script>

<style lang="scss" scoped>
.list {
  .breadcrumb {
    height: 21px;
    font-family: MicrosoftYaHei, sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 21px;
    letter-spacing: 0em;
    margin-left: 30px
  }

  .content {
    background: #FFFFFF;
    border-radius: 10px;
    opacity: 1;
    width: 100%; 
    padding: 20px 20px 50px;
    .no{
      color: red;
    }
    .yes{
      color: green;
    }
    .text{
      color: #000;
    }
    .price{
      color: red;
      font-size: 24px;
    }
  }
}


</style>
